// Format definition lists as tables. This allows us to use Markdown instead of
// HTML, and also allows us to have a responsive design that works on mobile.
//
// TODO: Do not render as a table on mobile.

dl.as-table {

  // Turn dl into a table
  & {
    display: grid;
    grid-template-columns: max-content auto;
  }
  > dt {
    grid-column-start: 1;
  }
  > dd {
    grid-column-start: 2;
  }

  // Remove extra whitespace from top and bottom of each box.
  > dd > :first-child,
  > dd > ul:first-child > li:first-child,
  > dd > ul:first-child > li:first-child > p:first-child  {
    margin-top: 0;
  }
  > dd > :last-child,
  > dd > ul:last-child > li:last-child,
  > dd > ul:last-child > li:last-child > p:last-child  {
    margin-bottom: 0;
  }

  // Format similar to the table from minima/_base.scss.
  & {
    border-top: 1px solid $grey-light;
    border-left: 1px solid $grey-light;
    border-collapse: collapse;
    margin: 1rem 0 2.5rem 0;
    line-height: 1.4;
  }
  > dd, > dt {
    border-right: 1px solid $grey-light;
    border-bottom: 1px solid $grey-light;
    padding: $spacer-l ($spacer-xl / 2);
  }
  > dt {
    text-align: left;
    font-weight: 500;
    color: $green-dark;
    background-color: $green-lightest;

    // Vertically center the definition term
    display: flex;
    align-items: center;
  }
}
